<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="assets/css/map.css" rel="stylesheet">
		<link href="assets/css/leaflet.css" rel="stylesheet">
		<title>leaflet</title>
	</head>

	<body>

		<div id="map"></div>

		<script src="assets/js/leaflet.js"></script>
		<script src="assets/js/leaflet-heat.js"></script>
		<script src="data/heatData.js"></script>
		<script>
			let map = L.map("map", {
				center: [50.5, 30.5, 0.2],
				zoom: 4,
				maxZoom: 18,
			});
			L.tileLayer(
				"http://{s}.tile.osm.org/{z}/{x}/{y}.png"
			).addTo(map);
			map.fitBounds(heatData);
			const points = heatData.map((item) => {
				return [item[0], item[1]];
			});
			L.heatLayer(points).addTo(map);
		</script>
	</body>

</html>